<template>
    <view class="p-20">
        <z-paging ref="paging" v-model="dataList" use-page-scroll @query="queryList">
            <template #refresher="{refresherStatus}">
                <custom-refresher :status="refresherStatus" />
            </template>
            <template #loadingMoreNoMore>
                <custom-nomore />
            </template>
            <view class="" v-for="(item,index) in dataList" :key="index">
                <view class="bg-white p-30 flex col-center row-between m-b-20 box_shadow br12">
                    <view class="">
                        <view class="bold x">
                            借出编号：{{item.maintenanceNo}}
                        </view>
                        <view class="m-t-10">
                            <span>
                                状态：<u-tag size="mini" text="待养护" type="warning" v-if="item.status == 0"></u-tag>
                                <u-tag size="mini" text="已养护" type="success" v-if="item.status == 1"></u-tag>
                                <u-tag size="mini" text="无法养护" type="danger" v-if="item.status == 2"></u-tag>
                            </span>
                        </view>
                    </view>
                    <view class="">
                        <span class="m-r-10"><u-tag text="详情" type="primary"
                                @click="handleDetail(item.id)"></u-tag></span>
                        <span class="m-r-10"><u-tag text="编辑" type="primary"
                                @click="openPopup('edit',item)"></u-tag></span>
                    </view>
                </view>
            </view>

            <u-popup v-model=" showPopup" mode="right" :mask-close-able="false" length="85%">
                <view class="p-20">
                    <uni-forms :model="goodsInfo">
                        <uni-forms-item label="维修编号">
                            <uni-easyinput disabled v-model="goodsInfo.maintenanceNo" type="text" border="none" />
                        </uni-forms-item>
                        <uni-forms-item label="维修名称">
                            <uni-easyinput v-model="goodsInfo.maintenanceName" type="text" border="none"
                                placeholder="请输入维修名称" />
                        </uni-forms-item>
                        <uni-forms-item label="状态">
                            <uni-data-select v-model="goodsInfo.status" :localdata="statusList"></uni-data-select>
                        </uni-forms-item>
                        <uni-forms-item label="备注">
                            <uni-easyinput v-model="goodsInfo.remark" type="textarea" border="none"
                                placeholder="请输入备注" />
                        </uni-forms-item>
                    </uni-forms>

                    <view class="flex row-around m-t-40">
                        <u-button @click="showPopup = false">取消</u-button>
                        <u-button type="primary" @click="handleData">保存</u-button>
                    </view>
                </view>
            </u-popup>
        </z-paging>
    </view>
</template>

<script setup>
    import {
        apiGetMaintainList,
        apiUpdateMaintainInfo,
    } from '@/api/index.js'
    import {
        ref
    } from 'vue'
    import {
        onLoad
    } from '@dcloudio/uni-app'
    import {
        onPageScroll,
        onReachBottom
    } from '@dcloudio/uni-app';
    import useZPaging from "@/uni_modules/z-paging/components/z-paging/js/hooks/useZPaging.js";

    const dataList = ref([])
    const paging = ref(null)
    const showPopup = ref(false)
    const goodsInfo = ref({})
    const statusList = [{
        text: '待养护',
        value: '0'
    }, {
        text: '已养护',
        value: '1'
    }, {
        text: '无法养护',
        value: '2'
    }]


    const queryList = (pageNo, pageSize) => {
        const params = {
            current: pageNo,
            pageSize: pageSize,
        }
        apiGetMaintainList(params).then(res => {
            paging.value.complete(res.data.records);
        }).catch(res => {
            paging.value.complete(false);
        })
    }
    //编辑
    const openPopup = (type, item) => {
        showPopup.value = true
        goodsInfo.value = item
    }

    const handleDetail = (id) => {
        uni.navigateTo({
            url: `/pages/setting/maintain/detail?headId=${id}`
        })
    }

    //保存
    const handleData = async () => {
        try {
            let res = await apiUpdateMaintainInfo({
                ...goodsInfo.value
            })
            if (res.code == 200) {
                uni.$u.toast('保存成功')
                setTimeout(() => {
                    showPopup.value = false
                }, 1000)
            } else {
                uni.$u.toast('保存失败')
            }
        } catch (err) {

        }
    }
    useZPaging(paging)
</script>